<template>
  <a-carousel autoplay dotsClass="bottom-dots">
    <div v-for="(item, index) in banners" :key="index" :style="{'height': height + 'px'}">
      <LazyImage :item="item" @click="bannerJump(item)"></LazyImage>
    </div>
  </a-carousel>
</template>

<script>

import {
  Carousel,
} from 'ant-design-vue'

import LazyImage from '@components/lazyImage';

export default {
  name: 'swiper-banner',
  components: {
    [Carousel.name]: Carousel,
    LazyImage
  },
  props: {
    banners: Array,
    height: {
      type: Number,
      default: 290
    }
  },
  data() {
    return{

    }
  },
  methods: {
    bannerJump(item) {
      console.log(item);
      
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-carousel {
  .slick-list {
    max-width: 100%;
  }
}
</style>